<template>
    <div style="height: 100%;">
        <!-- <button @click="chonzhi">123</button> -->
        <el-input class="inputView" size="mini" placeholder="请输入" v-model="filterText">
            <i slot="suffix" class="el-icon-search" @click="onSearch"></i>
        </el-input>
        <div class="treeH">
            <el-tree :class="defaultCheckedKeys.length>0?'filter-tree':''" :data="data" :props="defaultProps"
                :default-checked-keys="defaultCheckedKeys" :filter-node-method="filterNode"
                @node-click="handleNodeClick" ref="tree" node-key="id">
                <!-- <slot>123</slot> -->
                <span slot-scope="{ node, data }">
                    <template>
                        <div class="flex-r-c">
                            <img v-if="data.img" style="width : 16px;height: 17px;margin:0px 12px;"
                                :src="getsetectData==data.id?data.img:data.imgN" alt="">
                            <!-- <div v-if="data.level!=1" class="clolrView"
                                :style="{background:colors[data.level]||'#F6F6F6'}"></div> -->
                            <span :class="data.weight=='bold' ? 'weight treeTextBlack' : 'treeTextBlack'">{{
                            node.label }}</span>
                        </div>
                        <!-- <span>{{ data }}</span> -->
                    </template>
                </span>
            </el-tree>
        </div>
    </div>
</template>

<script>
export default ({
    name: 'MyTreeScreen',
    components: {},
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        defaultProps: {

        },
        defaultCheckedKeys: {
            type: Array,
            default: () => [],
        }
    },
    data() {
        return {
            colors: ['', '', '#FF7400', '#26A51C', '#3F8EFF'],
            filterText: '',
            datas: ['1'],
            setectData: {}
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    mounted() {

    },
    methods: {
        onSearch() {

            this.$emit('onSearch', this.filterText)

        },
        chonzhi() {
            // this.$refs.tree.setCurrentKey(null)
            // this.props. = []
            this.setectData = {}
            this.$refs.tree.setCurrentKey(null);
            // this.$refs.tree.setCurrentKey([]);
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.goodsName.indexOf(value) !== -1;
        },
        handleNodeClick(data) {
            if (this.setectData.id != data.id) {
                this.setectData = data
                console.log(data)
                this.datas = []
                this.$emit('nodeClick', data)
            } else {
                this.$emit('nodeClick', '')
                this.chonzhi()
            }
        }
    },
    computed: {
        getsetectData() {
            if (this.setectData.id) {
                return this.setectData.id
            } else {
                return this.defaultCheckedKeys[0]
            }

        }
    },
})
</script>

<style scoped>
.clolrView {
    width: 5px;
    height: 16px;
    margin-right: 5px;
}

*>>>.el-input__suffix {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.treeH::-webkit-scrollbar {
    width: 0 !important
}

.treeH {
    height: calc(100% - 60px);
    /* flex: auto; */
    /* position: relative; */
    overflow-y: scroll;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
}

.filter-tree {}

.treeTextBlack {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    /* font-weight: 400; */
    color: #4E5879;
    line-height: 22px;
}

.weight {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    /* font-weight: 500; */
    color: #1B2E5E;
    line-height: 25px;
}

.inputView {
    margin-top: 8px;
    margin-bottom: 24px;
}

*>>>.el-tree-node__content {
    /* margin: 12px 0px !important; */
}

*>>>.el-tree-node.is-current>.el-tree-node__content {
    background-image: linear-gradient(270deg, rgba(63, 142, 255, 0.1) 0%, #3F8EFF 100%) !important;
    border-radius: 4px;
}

*>>>.filter-tree>.el-tree-node.is-focusable.is-checked>.el-tree-node__content {
    background-image: linear-gradient(270deg, rgba(63, 142, 255, 0.1) 0%, #3F8EFF 100%) !important;
    border-radius: 4px;
}

*>>>.filter-tree>.el-tree-node.is-focusable.is-checked>.el-tree-node__content span {
    color: #fff;
    font-weight: bold;
}

*>>>.el-tree-node.is-current>.el-tree-node__content span {
    color: #fff;
    font-weight: bold;
}

/* *>>>.el-tree-node__expand-icon {
    position: absolute;
    right: 2%;
} */

/* *>>>.el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
} */

/* *>>>.el-icon-caret-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
} */

/* *>>>.el-icon-caret-right:before {
    display: inline-block;
    width: 8px;
    height: 4px;
    content: "";
    background: url("../../assets/images/pull-down.png") no-repeat 0 0;
    background-size: 100%;
} */

/* *>>>.is-leaf:before {
    display: none;
} */

/* *>>>.expanded {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
} */

/* *>>>.expanded:before {
    display: inline-block;
    width: 8px;
    height: 4px;
    content: "";
    background: url("../../assets/images/pack-up.png") no-repeat 0 0;
    background-size: 100%;
} */
</style>